<template>
  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" :hide-required-asterisk="true">
          <el-row :gutter="24">
            <el-col :xs="24">
              <el-form-item :label="$t('system.database')" prop="database" class="spread">
                <el-input v-model="ruleForm.database"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24">
              <el-form-item :label="$t('system.account')" prop="userName" class="spread">
                <el-input v-model="ruleForm.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24">
              <el-form-item :label="$t('system.password')" prop="password" class="spread">
                <div style="display:flex">
                  <el-input v-model="ruleForm.password" type="password"></el-input>
                  <el-button type="primary" size="small" style="margin-left:15px" @click="handleTset">{{$t('system.test')}}</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24">
              <el-form-item>
                <!-- <el-button @click="handleReset1('ruleForm')">重 置</el-button> -->
                <el-button type="primary" @click="handleSave('ruleForm')" :loading="loading">{{ $t("common.preservation") }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-col>

    </el-row>

  </div>
</template>

<script>
import { siteConfig } from '@/api/siteConfig'
export default {
  data () {
    return {
      ruleForm: {
        database: "",
        userName: "",
        password: "",

        databaseId: "",
        userNameId: "",
        passwordId: "",

      },
      loading: false,
      rules: {
        database: [{ required: true, message: '请输入数据库', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入用户', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },

    }
  },
  created () {
    this.findRedis()
  },
  methods: {
    findRedis () {
      siteConfig.redisList().then(res => {
        if (res.code == 200) {
          if (res.data.rows && res.data.rows.length) {
            this.ruleForm.database = res.data.rows[3].value
            this.ruleForm.userName = res.data.rows[4].value
            this.ruleForm.password = res.data.rows[5].value

            this.ruleForm.databaseId = res.data.rows[3].fid
            this.ruleForm.userNameId = res.data.rows[4].fid
            this.ruleForm.passwordId = res.data.rows[5].fid
          }

        }
      })
    },
    handleSave (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let connect = await this.handleTset('save')
          if (connect) {
            const param = {
              keys: "spring.datasource.url",
              value: this.ruleForm.database,
              fid: this.ruleForm.databaseId
            }
            const param1 = {
              keys: "spring.datasource.username",
              value: this.ruleForm.userName,
              fid: this.ruleForm.userNameId
            }
            const param2 = {
              keys: "spring.datasource.password",
              value: this.ruleForm.password,
              fid: this.ruleForm.passwordId
            }
            this.loading = true
            let res = await siteConfig.modifyRedis(param)
            let res1 = await siteConfig.modifyRedis(param1)
            let res2 = await siteConfig.modifyRedis(param2)
            if (res2.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            }
          }

          this.loading = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleTset (type) {
      return new Promise((resolve, reject) => {
        const param = {
          type: 1,
          springDatasourceUrl: this.ruleForm.database,
          springDatasourceUsername: this.ruleForm.userName,
          springDatasourcePassword: this.ruleForm.password,
        }
        siteConfig.connect(param).then(res => {
          if (res.code == 200) {
            resolve(true)
            if (type != 'save') {
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }

          } else {
            resolve(false)
            this.$message.error(res.msg);
          }
        })
      })
    },
    handleReset (formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>
<style scoped>
.form {
  width: 50%;
}
.spread >>> .el-select {
  width: 100%;
}
</style>